<template>
  <transition name="fade">
    <div v-if="isShow" class="message">
      <div>
        <van-row class="msg-header" justify="center" type="flex">
          <van-col span="14">
            <div style="display: flex">
              <img :src="require('@/assets/images/incomingCall/phone.png')"
                   style="transform:rotate(45deg) scale(0.8);" />
              <div class="msg-title">来电提醒</div>
            </div>

          </van-col>
          <van-col span="10">
            <div style="text-align: right;margin-right: 10px">
              <van-button class="msg-clear" @click="isShow=false">忽略</van-button>
              <van-button class="msg-goto" @click="goto()">立即处理</van-button>
            </div>
          </van-col>
        </van-row>
      </div>
      <van-divider class="msg-line" />
      <div style="margin-bottom: 10px">
<!--        <van-row>-->
<!--          <van-col class="msg-content" span="9">来电号码：</van-col>-->
<!--          <van-col class="msg-content" span="12">{{ userPhone }}</van-col>-->
<!--        </van-row>-->
<!--        <van-row v-if="!!userName">-->
<!--          <van-col span="9" class="msg-content orange">来电客户姓名：</van-col>-->
<!--          <van-col span="12"class="msg-content orange">{{ userName }}</van-col>-->
<!--        </van-row>-->

        <div class="msg-content">来电号码：{{ userPhone }}</div>
        <div v-if="!!userName" class="msg-content orange">来电客户姓名：{{ userName }}</div>
        <van-row v-if="!!userCar"  class="msg-content orange">
          <van-col span="8.5" >来电客户车辆：</van-col>
          <van-col span="14" style="margin-right: 0px">{{ userCar }}</van-col>
        </van-row>
      </div>
      <!--      <slot></slot>-->
    </div>
  </transition>
</template>

<script>
import { getCookies } from '../../utils/util'
import homeApi from '../../api/homeApi'

const base_url = process.env.BASE_API
export default {
  data() {
    return {
      isShow: false,
      userName: '',
      userPhone: '',
      userCar: '',
      eventSource: null,
      timer: null,
      userId:'',
    }
  },
  mounted() {
    this.sseClint()
  },
  beforeDestroy() {
    homeApi.closeSse(this.userId)
  },
  methods: {
    sseClint() {
      this.timer = setInterval(() => {
        let isAiccUser = getCookies('isAiccUser')
        let userId = getCookies('userId')
        if (this.eventSource==null) {
          if (isAiccUser == 'true' && !!userId) {
            this.userId = userId
            this.createSseConnect()
            clearInterval(this.timer)
          }
          if (isAiccUser == 'false') {
            clearInterval(this.timer)
          }
        }
      }, 1000)
    },
    createSseConnect() {
      let that = this
      if (window.EventSource) {
        let userId = getCookies('userId')
        that.eventSource = new EventSource(`${base_url}/stream-sse/createSse?uid=${userId}`)
        that.eventSource.onopen = function(event) {
          console.log('SSE连接成功' + new Date().Format('yyyy-MM-dd hh:mm:ss'))
        }
        that.eventSource.onmessage = function(event) {
          console.log(event.data)
          let dataJson = JSON.parse(event.data)
          that.userPhone = dataJson.tel
          that.userName = dataJson.customerName
          that.userCar = dataJson.carNos
          that.isShow = true
          setTimeout(() => {
            that.isShow = false
          }, 30000)
        }
        that.eventSource.onerror = (e) => {
          console.log('SSE连接失败' + new Date().Format('yyyy-MM-dd hh:mm:ss'))
        }

      } else {
        console.log('不支持sse')
      }
    },
    goto() {
      let that = this
      that.isShow = false
      this.$router.push({
        path: '/incomingCall',
        query: {
          tel: this.userPhone
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.message {
  position: fixed;
  top: 4px;
  //width: 367px;
  width: 95%;
  //height: 137px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  //text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  z-index: 999;
  left: 50%;
  right: 50%;
  transform: translate(-50%);
  box-sizing: border-box;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}


.msg-header {
  align-items: center;
}

.msg-title {
  width: 72px;
  height: 25px;
  line-height: 25px;
  color: rgba(22, 93, 255, 1);
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  align-self: center;
}

.msg-clear {
  width: 52px;
  height: 30px;
  line-height: 20px;
  border-radius: 5px;
  background-color: rgba(255, 68, 68, 0.83);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
  padding: 0px;
}

.msg-goto {
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 5px;
  background-color: rgba(22, 93, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
  padding: 0px;
}

.msg-line {
  margin: 0px;
}

.msg-content {
  //width: 100%;
  //height: auto;
  line-height: 25px;
  color: rgba(16, 16, 16, 1);
  font-size: 18px;
  text-align: left;
  margin-left: 10px;
}

.orange {
  color: rgba(250, 143, 37, 1);
}
</style>
